

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=dark>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/my-blog/img/fluid.png">
  <link rel="icon" href="/my-blog/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="木舟">
  <meta name="keywords" content="python Vue Test 测试开发 自动化测试">
  
    <meta name="description" content="前言胜利的曙光即将出现！ 通过前面这么多html、css章节的学习铺垫，在学习完这一章节后，咱们就可以开始正式的做网页了！ 这一章节，主要介绍的是布局细则，你将会全面了解css各种布局的细则，或者说方式。 布局规则，也叫做视觉格式化模型。 视觉格式化模型：规定页面中多个盒子的排列规则。 主要包含以下四种常见规则：  常规流，就是什么特殊布局都没有，遵从css的默认布局规则。 浮动 定位 弹性布局">
<meta property="og:type" content="article">
<meta property="og:title" content="布局细则">
<meta property="og:url" content="https://walker_kwu.gitee.io/my-blog/2022/09/16/notes/css/layoutRule/">
<meta property="og:site_name" content="My Blog">
<meta property="og:description" content="前言胜利的曙光即将出现！ 通过前面这么多html、css章节的学习铺垫，在学习完这一章节后，咱们就可以开始正式的做网页了！ 这一章节，主要介绍的是布局细则，你将会全面了解css各种布局的细则，或者说方式。 布局规则，也叫做视觉格式化模型。 视觉格式化模型：规定页面中多个盒子的排列规则。 主要包含以下四种常见规则：  常规流，就是什么特殊布局都没有，遵从css的默认布局规则。 浮动 定位 弹性布局">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://walker_kwu.gitee.io/my-blog/img/use/flexContainer.png">
<meta property="og:image" content="https://walker_kwu.gitee.io/my-blog/img/use/align-content%E9%BB%98%E8%AE%A4%E5%80%BCstretch.png">
<meta property="og:image" content="https://walker_kwu.gitee.io/my-blog/img/use/align-content%E4%B8%BAflex-start.png">
<meta property="article:published_time" content="2022-09-16T05:52:16.000Z">
<meta property="article:modified_time" content="2023-05-23T10:37:53.249Z">
<meta property="article:author" content="木舟">
<meta property="article:tag" content="测试开发">
<meta property="article:tag" content="测试平台">
<meta property="article:tag" content="css">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://walker_kwu.gitee.io/my-blog/img/use/flexContainer.png">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>布局细则 - My Blog</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/my-blog/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/my-blog/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/my-blog/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"walker_kwu.gitee.io","root":"/my-blog/","version":"1.9.2","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"left","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/my-blog/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/my-blog/js/utils.js" ></script>
  <script  src="/my-blog/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.2.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/my-blog/">
      <strong>木舟</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/my-blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/my-blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/my-blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/my-blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/my-blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/my-blog/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="布局细则"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        木舟
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2022-09-16 13:52" pubdate>
          2022年9月16日 下午
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          12k 字
        
      </span>
    

    

    
    
      
        <span id="busuanzi_container_page_pv" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="busuanzi_value_page_pv"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="padding-left: 2rem; margin-right: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">布局细则</h1>
            
              <p class="note note-info">
                
                  
                    本文最后更新于：2023年5月23日 晚上
                  
                
              </p>
            
            
              <div class="markdown-body">
                
                <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>胜利的曙光即将出现！</p>
<p>通过前面这么多html、css章节的学习铺垫，在学习完这一章节后，咱们就可以开始正式的做网页了！</p>
<p>这一章节，主要介绍的是<strong>布局细则</strong>，你将会全面了解css各种布局的细则，或者说方式。</p>
<p>布局规则，也叫做<strong>视觉格式化模型</strong>。</p>
<p>视觉格式化模型：规定页面中多个盒子的排列规则。</p>
<p>主要包含以下四种常见规则：</p>
<ul>
<li>常规流，就是什么特殊布局都没有，遵从css的默认布局规则。</li>
<li>浮动</li>
<li>定位</li>
<li>弹性布局</li>
</ul>
<p>其中，弹性布局属于css3的内容。</p>
<p>我们之前的章节主要围绕的是css2的内容，css3是一个更大更新的知识体系，但是我们目前做一个网页，css2的知识就完全够用了。</p>
<p>那么，为什么我们还要学习css3的弹性布局，因为弹性布局更加好用，它能够为了你提供90%以上的布局方案。</p>
<h1 id="常规流"><a href="#常规流" class="headerlink" title="常规流"></a>常规流</h1><p>所有元素，在默认情况下，都遵从常规流布局。</p>
<p>多种叫法：</p>
<ul>
<li>常规流</li>
<li>文档流</li>
<li>普通文档流</li>
<li>常规文档流</li>
</ul>
<h2 id="总结规则"><a href="#总结规则" class="headerlink" title="总结规则"></a>总结规则</h2><p>块盒独占一行。<br>行盒水平方向依次排列。</p>
<h2 id="包含块"><a href="#包含块" class="headerlink" title="包含块"></a>包含块</h2><p>每个盒子都有它自己的包含块，包含块决定了在其中的盒子的排列区域，也就是<strong>内容盒 content-box</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.parent</span>&#123;<br>    <span class="hljs-attribute">background</span>: lightblue;<br>    <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid;<br>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">30px</span>;<br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">30px</span>;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">1000px</span>;<br>&#125;<br><span class="hljs-selector-class">.child</span>&#123;<br>    <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid;<br>    <span class="hljs-attribute">background</span>: red;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">50%</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;parent&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;child&quot;</span>&gt;</span><br>        <br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>试验一下，可以看到，child盒子的显示范围，只能在父元素的内容盒里边。</p>
<h2 id="包含块规则"><a href="#包含块规则" class="headerlink" title="包含块规则"></a>包含块规则</h2><h3 id="块盒总宽度，等于包含块的宽度"><a href="#块盒总宽度，等于包含块的宽度" class="headerlink" title="块盒总宽度，等于包含块的宽度"></a>块盒总宽度，等于包含块的宽度</h3><p>外边距+边框+内边距+width = 包含块的宽度</p>
<h4 id="宽度auto"><a href="#宽度auto" class="headerlink" title="宽度auto"></a>宽度auto</h4><p>默认情况下，width宽度的默认值为<strong>auto</strong>。</p>
<p>取值为auto是什么意思？</p>
<p>auto：在常规流布局中，块盒的宽度，会将包含块的剩余空间全部吸收。这也就是为什么块盒在默认情况下会独占一行。</p>
<p>我都吸收掉了，其他盒子想进来，都得排到我后面当老二。</p>
<p>有人会问：那如果宽度固定为小于包含块的宽度呢？不急，在我介绍完margin之后，你就明白了。</p>
<h4 id="外边距auto（水平方向）"><a href="#外边距auto（水平方向）" class="headerlink" title="外边距auto（水平方向）"></a>外边距auto（水平方向）</h4><p>margin的取值也可以为auto，默认值为0.</p>
<p>margin为auto的时候，也会将剩余空间全部吸收。</p>
<p>但是这个有一个前提，就是width不为auto。</p>
<p>因为：width的吸收的优先级是高于margin的，width吸收完了，margin再去吸收，已经没有空间让他吸收了。</p>
<p>当margin为默认值时，也就是不设置margin时，且还有剩余宽度时，会让margin-right吸收掉剩余宽度，因为：</p>
<ul>
<li>块盒必须要独占一行</li>
<li>外边距+边框+内边距+width = 包含块的宽度</li>
</ul>
<p>margin-right眼中的剩余宽度：宽度、边框、内边距、外边距计算后的包含块剩余空间.</p>
<p>所以在<strong>常规流</strong>中，通过以下的方式，是最快最规范最方便的能让块盒在包含块中居中。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.test</span>&#123;<br>    <span class="hljs-comment">/* 宽度定宽，左右marginauto */</span><br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>; <br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="高度auto"><a href="#高度auto" class="headerlink" title="高度auto"></a>高度auto</h4><p>height为auto的时候，会适应内容，内容越多，高度越高。</p>
<h4 id="外边距auto（垂直方向）"><a href="#外边距auto（垂直方向）" class="headerlink" title="外边距auto（垂直方向）"></a>外边距auto（垂直方向）</h4><p>直接就是表示0，没啥好说的。</p>
<h3 id="百分比取值"><a href="#百分比取值" class="headerlink" title="百分比取值"></a>百分比取值</h3><h4 id="padding、width、margin"><a href="#padding、width、margin" class="headerlink" title="padding、width、margin"></a>padding、width、margin</h4><p>padding、width、margin的取值，如果为百分比，都是相对于<em><strong>包含块的宽度</strong></em></p>
<h4 id="height"><a href="#height" class="headerlink" title="height"></a>height</h4><p>我们分以下情况来说明：</p>
<ul>
<li>包含块的高度是否取决于子元素的高度，这个时候，子元素设置高度百分比无效</li>
<li>包含块的高度，不取决于子元素的高度，这个时候，子元素设置高度百分比，是相对于父元素的高度。</li>
</ul>
<h3 id="外边距合并问题"><a href="#外边距合并问题" class="headerlink" title="外边距合并问题"></a>外边距合并问题</h3><p>两个常规流块盒，上下外边距相邻，会进行合并。</p>
<p>两个外边距取最大值。</p>
<p>解决方式：</p>
<ul>
<li>border</li>
<li>padding，推荐</li>
<li>overflow</li>
<li>弹性布局</li>
<li>定位</li>
</ul>
<h1 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h1><p>浮动，在css属性中为<strong>float</strong>。</p>
<p>浮动表现形式与常规流很不同，当然，所有的布局中，相对于其他布局，都是独特的。</p>
<p>浮动一般会有以下的应用场景：</p>
<ul>
<li>文字环绕</li>
<li>横向排列（目前已经被<strong>弹性布局</strong>替代），但是如果涉及到<strong>兼容性</strong>，还是会选择浮动</li>
</ul>
<h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><p>默认值为none</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.test</span>&#123;<br>    <span class="hljs-comment">/* 左浮动，元素靠上靠左 */</span><br>    <span class="hljs-attribute">float</span>: right;<br>    <span class="hljs-comment">/* 右浮动，元素靠上靠右 */</span><br>    <span class="hljs-attribute">float</span>: left<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="基本特点"><a href="#基本特点" class="headerlink" title="基本特点"></a>基本特点</h2><h3 id="浮动元素强制为块盒"><a href="#浮动元素强制为块盒" class="headerlink" title="浮动元素强制为块盒"></a>浮动元素强制为块盒</h3><p>一旦修改属性值不为none时，display一定为block。</p>
<h3 id="包含块与常规流一样"><a href="#包含块与常规流一样" class="headerlink" title="包含块与常规流一样"></a>包含块与常规流一样</h3><ul>
<li>浮动元素的包含块，也与常规流一样，是父元素的内容盒。</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span>&#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;<br>    <span class="hljs-attribute">background</span>: lightblue;<br>&#125;<br><br><span class="hljs-selector-class">.container</span> <span class="hljs-selector-tag">div</span>&#123;<br>    <span class="hljs-attribute">background</span>: red;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span><br>&#125;<br><br><span class="hljs-selector-class">.container</span> <span class="hljs-selector-class">.left</span>&#123;<br>    <span class="hljs-attribute">float</span>: left;<br>&#125;<br><br><span class="hljs-selector-class">.container</span> <span class="hljs-selector-class">.right</span>&#123;<br>    <span class="hljs-attribute">float</span>: right;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><br>        Lorem ipsum dolor sit amet.<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><br>        Lorem, ipsum dolor.<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="盒子尺寸"><a href="#盒子尺寸" class="headerlink" title="盒子尺寸"></a>盒子尺寸</h2><ul>
<li>宽度为默认值auto时，宽度随着内容自适应</li>
<li>高度为默认值auto时，与常规流一致，高度随着内容自适应</li>
<li>margin为auto的时候，值就是0。不会像常规流一样，自动吸收</li>
<li>边框、内边距、宽度，百分比设置与常规流一致。</li>
</ul>
<h2 id="排列方式"><a href="#排列方式" class="headerlink" title="排列方式"></a>排列方式</h2><ul>
<li>左浮动靠上靠左</li>
<li>右浮动靠上靠右</li>
<li>浮动盒子会避开处于前面的常规流盒子</li>
<li>常规流块盒，会无视处于前面的浮动盒子</li>
<li>行盒会避开处于前面的浮动盒子，从而实现文字环绕。</li>
</ul>
<blockquote>
<p>如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。</p>
</blockquote>
<blockquote>
<p>设置浮动元素与常规流元素的间距时，要设置浮动元素本身的margin</p>
</blockquote>
<h2 id="高度坍塌"><a href="#高度坍塌" class="headerlink" title="高度坍塌"></a>高度坍塌</h2><p>浮动元素，会造成<strong>高度坍塌</strong>。</p>
<p>这个是使用浮动来布局经常会遇到的问题，这个时候我们就要解决高度坍塌。</p>
<p>否则，会造成网页布局错乱，非常严重。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.container</span> &#123;<br>    <span class="hljs-attribute">background</span>: lightblue;<br>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">30px</span>;<br>&#125;<br><br><span class="hljs-selector-class">.item</span> &#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>    <span class="hljs-attribute">background</span>: red;<br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">6px</span>;<br>    <span class="hljs-attribute">float</span>: left;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>这个时候，你会发现，父元素的高度没有被撑开。</p>
<p>这个就是<strong>高度坍塌</strong>。</p>
<p>原因：常规流盒子高度为auto时，在计算时，不会考虑浮动盒子。</p>
<p>我们可以通过<strong>清除浮动</strong>来解决，属性：clear</p>
<h2 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h2><ul>
<li>默认值为none</li>
<li>left，清除左浮动，该元素必须出现在前面所有左浮动盒子的下方</li>
<li>right，清除右浮动，该元素必须出现在前面所有右浮动盒子的下方</li>
<li>both，清除左右浮动，该元素必须出现在前面所有浮动盒子的下方</li>
</ul>
<h3 id="不建议的写法"><a href="#不建议的写法" class="headerlink" title="不建议的写法"></a>不建议的写法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;clear&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.clear</span>&#123;<br>    <span class="hljs-attribute">clear</span>: both<br>&#125;<br></code></pre></td></tr></table></figure>

<p>这种写法，需要完成以下步骤：</p>
<ul>
<li>创建一个div元素，并且给予一个类属性</li>
<li>通过类属性给予clear属性</li>
</ul>
<h3 id="推荐的写法"><a href="#推荐的写法" class="headerlink" title="推荐的写法"></a>推荐的写法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container clearfix&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;clear&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.clearfix</span><span class="hljs-selector-pseudo">::after</span> &#123;<br>    <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;&quot;</span>;<br>    <span class="hljs-attribute">display</span>: block;<br>    <span class="hljs-attribute">clear</span>: both;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>这种写法，我们只需要写css属性，而且不用担心会影响到网页元素的布局。</p>
<p>通过伪元素after的特性：显示在元素尾部，来帮助我们清除浮动。</p>
<h1 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h1><p>定位，在css属性中为<strong>position</strong>。</p>
<p>作用为：根据具体的数值，按照定位规则，来控制元素在包含块中的精确位置。</p>
<p>默认值static，代表不进行定位。取值有：</p>
<ul>
<li>relative, 相对定位</li>
<li>absolute，绝对定位</li>
<li>fixed，固定定位</li>
</ul>
<p>只要元素的position属性取值不为status与relative，该元素就会和浮动一样，会脱离文档流，不受常规流的限制。</p>
<p>脱离文档流：</p>
<ul>
<li>文档流中的元素摆放时，会忽略脱离了文档流的元素，包括行盒。</li>
<li>文档流中元素计算自动高度时，会忽略脱离了文档流的元素（高度坍塌）</li>
</ul>
<p>定位偏移量属性，代表四个方向的偏移量：</p>
<ul>
<li>top</li>
<li>right</li>
<li>bottom</li>
<li>left</li>
</ul>
<p>可以理解为margin。</p>
<p>定位元素的偏移，不会影响其他盒子的排列。</p>
<h2 id="相对定位relative"><a href="#相对定位relative" class="headerlink" title="相对定位relative"></a>相对定位relative</h2><p>相对定位，意思就是：相对于原来的位置进行偏移，所以它不会脱离文档流。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.test</span>&#123;<br>    <span class="hljs-comment">/* 在原来的位置上，向下、向右偏移10px */</span><br>    <span class="hljs-attribute">position</span>: relative;<br>    <span class="hljs-attribute">top</span>: <span class="hljs-number">10px</span>;<br>    <span class="hljs-attribute">left</span>: <span class="hljs-number">10px</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="绝对定位absolute"><a href="#绝对定位absolute" class="headerlink" title="绝对定位absolute"></a>绝对定位absolute</h2><h3 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h3><p>绝对定位，意思就是，相对于包含块的位置进行偏移，包含块位置需要视具体情况而定，所以他会脱离文档流。</p>
<p>具有以下规则：</p>
<ul>
<li>宽度高度为auto时，尺寸适应内容</li>
<li>包含块的区域，取决于祖先元素中最近的一个定位元素的填充盒(padding-box)，如果祖先元素中没有，则取决于html根元素（整个网页）。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 现在第三个div的包含块为html根元素 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:1000px; height:300px;  padding:30px; border:2px solid&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:800px; height:200px; padding:30px; border:2px solid&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:100px; height:100px; background:red; position:absolute&quot;</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 现在第三个div的包含块为第一个div --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:1000px; height:300px; position: relative; padding:30px; border:2px solid&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:800px; height:200px; padding:30px; border:2px solid&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:100px; height:100px; background:red; position:absolute&quot;</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们在为绝对定位元素设置包含块时，优先考虑position: relative。因为这样定位，在不设置偏移量的情况下，不会影响网页布局，但却能够起到定位的效果。</p>
<h3 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h3><ul>
<li>添加标识</li>
<li>顶部菜单</li>
<li>制作icon</li>
</ul>
<h2 id="固定定位fixed"><a href="#固定定位fixed" class="headerlink" title="固定定位fixed"></a>固定定位fixed</h2><p>固定定位，意思就是：包含块的区域固定，固定为视口区域，也就是浏览器可视窗口。</p>
<p>注意：视口区域和html根元素包含块，有本质上的区别。不要与absolute混淆。</p>
<h2 id="定位元素的居中"><a href="#定位元素的居中" class="headerlink" title="定位元素的居中"></a>定位元素的居中</h2><p>绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间</p>
<h3 id="水平方向"><a href="#水平方向" class="headerlink" title="水平方向"></a>水平方向</h3><ul>
<li>定宽</li>
<li>left、right为0</li>
<li>margin: 0 auto</li>
<li>position: fixed/absolute</li>
</ul>
<h3 id="垂直方向"><a href="#垂直方向" class="headerlink" title="垂直方向"></a>垂直方向</h3><ul>
<li>定高</li>
<li>top、bottom为0</li>
<li>margin: auto 0</li>
<li>position: fixed/absolute</li>
</ul>
<h2 id="定位元素重叠"><a href="#定位元素重叠" class="headerlink" title="定位元素重叠"></a>定位元素重叠</h2><p>这个涉及到<strong>堆叠上下文</strong>。</p>
<p>多个定位元素重叠时，比如A默认情况下，覆盖了B。</p>
<p>但是这个时候你想让B显示在A的上方。</p>
<p>可以使用z-index，根据z-index的数值进行排列。</p>
<p>z-index默认值为auto，表示根据网页规则自动排列。</p>
<p>可以设置负数和正数，不为auto时，根据数值大小进行排列。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 这个时候，B应该是覆盖在A的上方 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:1000px; height:300px; position: relative; padding:30px; border:2px solid&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:800px; height:200px; padding:30px; border:2px solid&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;a&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:100px; height:100px; background:red; position:absolute&quot;</span>&gt;</span><br>            A<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:100px; height:100px; background:green; position:absolute; top: 10px;&quot;</span>&gt;</span><br>            B<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我们来设置z-index</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.a</span>&#123;<br>    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">1</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>这个时候，A就在B的上方了。</p>
<h3 id="z-index-生效规则"><a href="#z-index-生效规则" class="headerlink" title="z-index 生效规则"></a>z-index 生效规则</h3><p>z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。</p>
<p>上面这段文字规则来自于<code>mdn</code></p>
<h2 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h2><ul>
<li>绝对定位、固定定位元素一定是块盒</li>
<li>绝对定位、固定定位元素一定不是浮动，浮动会强制改为none，即使你设置了浮动。</li>
<li>没有外边距合并</li>
</ul>
<h1 id="弹性布局"><a href="#弹性布局" class="headerlink" title="弹性布局"></a>弹性布局</h1><p>弹性布局，目前网页布局中最常用的布局方案。</p>
<p>它的出现，解决了很多很多网页布局难题，目前，它已经得到了所有浏览器的支持。</p>
<p>比如：</p>
<ul>
<li>并排排列</li>
<li>响应式布局（自适应布局）</li>
<li>居中布局</li>
<li>多栏布局</li>
<li>……</li>
</ul>
<blockquote>
<p>display: flex  块弹，最常用</p>
</blockquote>
<blockquote>
<p>display: inline-flex  行弹</p>
</blockquote>
<blockquote>
<p>注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。<br>因为已经不再需要这些属性来进行布局，弹性盒子已经包含了这些功能。</p>
</blockquote>
<h2 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h2><p>采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。</p>
<p><img src="/my-blog/img/use/flexContainer.png" srcset="/my-blog/img/loading.gif" lazyload></p>
<p>容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。</p>
<p>项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。</p>
<h2 id="弹性盒子的属性"><a href="#弹性盒子的属性" class="headerlink" title="弹性盒子的属性"></a>弹性盒子的属性</h2><ul>
<li>flex-direction</li>
<li>flex-wrap</li>
<li>flex-flow</li>
<li>justify-content</li>
<li>align-items</li>
<li>align-content</li>
</ul>
<h3 id="flex-direction"><a href="#flex-direction" class="headerlink" title="flex-direction"></a>flex-direction</h3><p>该属性可以修改主轴的方向。</p>
<p>可取四个值：</p>
<ul>
<li>row, 默认值，水平排列，从左到右，元素起点在左边，主轴为水平方向</li>
<li>row-reverse，水平排列，从右到左，元素起点在右边，主轴为水平方向</li>
<li>column，垂直排列，从上到下，元素起点在上边，主轴为垂直方向</li>
<li>column-reverse，垂直排列，从下到上，元素起点在下边，主轴为垂直方向</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span> &#123;<br>  <span class="hljs-attribute">flex-direction</span>: row | row-reverse | column | column-reverse;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="flex-wrap"><a href="#flex-wrap" class="headerlink" title="flex-wrap"></a>flex-wrap</h3><p>默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</p>
<p>换句话说：决定弹性盒子内部的成员是否要换行</p>
<ul>
<li>nowrap，默认值，不换行</li>
<li>wrap，换行，第二行在第一行下方</li>
<li>wrap-reverse，换行，第二行在第一行上方</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;<br>  <span class="hljs-attribute">flex-wrap</span>: nowrap | wrap | wrap-reverse;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="flex-flow"><a href="#flex-flow" class="headerlink" title="flex-flow"></a>flex-flow</h3><p>速写属性，是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，也就是flex-direction和flex-wrap的默认值。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;<br>  <span class="hljs-attribute">flex-flow</span>: column wrap<br>&#125;<br></code></pre></td></tr></table></figure>

<p>表示的是：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;<br>  <span class="hljs-attribute">flex-direction</span>: column;<br>  <span class="hljs-attribute">flex-wrap</span>:: wrap<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="justify-content"><a href="#justify-content" class="headerlink" title="justify-content"></a>justify-content</h3><p>属性定义了项目在主轴上的对齐方式。</p>
<p>它有5个可选值，具体对齐方式与主轴的方向有关。下面假设主轴为从左到右：</p>
<ul>
<li>flex-start（默认值）：左对齐</li>
<li>flex-end：右对齐</li>
<li>center： 居中</li>
<li>space-between：两端对齐，项目之间的间隔都相等。</li>
<li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li>
</ul>
<h3 id="align-items"><a href="#align-items" class="headerlink" title="align-items"></a>align-items</h3><p>属性定义项目在交叉轴上如何对齐。</p>
<p>它有5个可选值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：</p>
<ul>
<li>flex-start：交叉轴的起点对齐。</li>
<li>flex-end：交叉轴的终点对齐。</li>
<li>center：交叉轴的中点对齐。</li>
<li>baseline: 项目的第一行文字的基线对齐。</li>
<li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</li>
</ul>
<h3 id="align-content"><a href="#align-content" class="headerlink" title="align-content"></a>align-content</h3><p>定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
<p>简单来说就是盒子成员只有一行排列的时候，不起作用。如果多行排列，则该元素起作用。</p>
<p>与align-items一样，不过align-items作用于单行，align-content作用于多行。</p>
<p>该属性有6个可选值：</p>
<ul>
<li>flex-start：与交叉轴的起点对齐。</li>
<li>flex-end：与交叉轴的终点对齐。</li>
<li>center：与交叉轴的中点对齐。</li>
<li>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</li>
<li>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li>
<li>stretch（默认值）：如果项目未设置高度或设为auto，轴线占满整个交叉轴。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- align-content默认值stretch --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> </span><br><span class="hljs-tag"><span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100px; </span></span><br><span class="hljs-string"><span class="hljs-tag">height: 200px; </span></span><br><span class="hljs-string"><span class="hljs-tag">display: flex; </span></span><br><span class="hljs-string"><span class="hljs-tag">background-color: #DCDCDC;</span></span><br><span class="hljs-string"><span class="hljs-tag">flex-direction: row; </span></span><br><span class="hljs-string"><span class="hljs-tag">align-content: stretch;</span></span><br><span class="hljs-string"><span class="hljs-tag">flex-wrap: wrap;&quot;</span></span><br><span class="hljs-tag">&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 50px; width: 50px; background: red&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 50px; width: 50px; background: red&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 50px; width: 50px; background: red&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>效果如图：</p>
<p><img src="/my-blog/img/use/align-content%E9%BB%98%E8%AE%A4%E5%80%BCstretch.png" srcset="/my-blog/img/loading.gif" lazyload></p>
<p>可以看到值成员因为设置了高度，定高后，多行高度总和小于父元素的总高度。当align-content: stretch时，主轴线就占满了交叉轴，所以多行盒子就被隔开了。</p>
<p>如果我们把align-content设置为flex-start</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- align-content默认值flex-start --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> </span><br><span class="hljs-tag"><span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100px; </span></span><br><span class="hljs-string"><span class="hljs-tag">height: 200px; </span></span><br><span class="hljs-string"><span class="hljs-tag">display: flex; </span></span><br><span class="hljs-string"><span class="hljs-tag">background-color: #DCDCDC;</span></span><br><span class="hljs-string"><span class="hljs-tag">flex-direction: row; </span></span><br><span class="hljs-string"><span class="hljs-tag">align-content: flex-start;</span></span><br><span class="hljs-string"><span class="hljs-tag">flex-wrap: wrap;&quot;</span></span><br><span class="hljs-tag">&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 50px; width: 50px; background: red&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 50px; width: 50px; background: red&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 50px; width: 50px; background: red&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>效果如图：</p>
<p><img src="/my-blog/img/use/align-content%E4%B8%BAflex-start.png" srcset="/my-blog/img/loading.gif" lazyload></p>
<p>可以看到，盒子成员从交叉轴的起点，也就是左边（默认情况下），依次对齐，多行盒子之间没有空隙。</p>
<h2 id="成员的属性"><a href="#成员的属性" class="headerlink" title="成员的属性"></a>成员的属性</h2><p>也就是弹性盒子子元素的属性。</p>
<ul>
<li>order</li>
<li>flex-grow</li>
<li>flex-shrink</li>
<li>flex-basis</li>
<li>flex</li>
<li>align-self</li>
</ul>
<h3 id="order"><a href="#order" class="headerlink" title="order"></a>order</h3><p>定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
<p>如果所有成员该属性都一样，那么就按照默认排序。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;<br>  <span class="hljs-attribute">order</span>: <span class="hljs-number">0</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="flex-grow"><a href="#flex-grow" class="headerlink" title="flex-grow"></a>flex-grow</h3><p>定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。</p>
<p>一般做响应式布局（自适应布局），该属性会设置成1</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;<br>  <span class="hljs-attribute">flex-grow</span>: <span class="hljs-number">1</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。</p>
<p>如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box-item1</span>&#123;<br>    <span class="hljs-comment">/* 占据1/3的空间 */</span><br>    <span class="hljs-attribute">flex-grow</span>: <span class="hljs-number">1</span><br>&#125;<br><span class="hljs-selector-class">.box-item2</span>&#123;<br>    <span class="hljs-comment">/* 占据2/3的空间 */</span><br>    <span class="hljs-attribute">flex-grow</span>: <span class="hljs-number">2</span><br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="flex-shrink"><a href="#flex-shrink" class="headerlink" title="flex-shrink"></a>flex-shrink</h3><p>定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;<br>  <span class="hljs-attribute">flex-shrink</span>: <span class="hljs-number">1</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。</p>
<p>如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</p>
<h3 id="flex-basis"><a href="#flex-basis" class="headerlink" title="flex-basis"></a>flex-basis</h3><p>具体规则：</p>
<ul>
<li>默认为auto，即什么都不管，跟随弹性原则</li>
<li>当flex-shrink属性为0时，定义了盒子的最小尺寸</li>
<li>当flex-grow不为0时，优先生效flex-grow</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 当flex-shrink属性为0时，定义了盒子的最小尺寸 --&gt;</span><br><span class="hljs-comment">&lt;!-- 即使父元素在尺寸变小于300px的情况下，子元素仍为300px --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> </span><br><span class="hljs-tag"><span class="hljs-attr">style</span>=<span class="hljs-string">&quot;</span></span><br><span class="hljs-string"><span class="hljs-tag">height: 200px; </span></span><br><span class="hljs-string"><span class="hljs-tag">display: flex; </span></span><br><span class="hljs-string"><span class="hljs-tag">background-color: #DCDCDC;</span></span><br><span class="hljs-string"><span class="hljs-tag">flex-direction: row; </span></span><br><span class="hljs-string"><span class="hljs-tag">align-content: stretch;</span></span><br><span class="hljs-string"><span class="hljs-tag">flex-wrap: wrap;&quot;</span></span><br><span class="hljs-tag">&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 50px; flex-basis: 300px; flex-grow: 1; flex-shrink: 0; background: red&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 当flex-grow不为0时，优先生效flex-grow --&gt;</span><br><span class="hljs-comment">&lt;!-- 此时撑满了整个div --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> </span><br><span class="hljs-tag"><span class="hljs-attr">style</span>=<span class="hljs-string">&quot;</span></span><br><span class="hljs-string"><span class="hljs-tag">width: 400px;</span></span><br><span class="hljs-string"><span class="hljs-tag">height: 200px; </span></span><br><span class="hljs-string"><span class="hljs-tag">display: flex; </span></span><br><span class="hljs-string"><span class="hljs-tag">background-color: #DCDCDC;</span></span><br><span class="hljs-string"><span class="hljs-tag">flex-direction: row; </span></span><br><span class="hljs-string"><span class="hljs-tag">align-content: stretch;</span></span><br><span class="hljs-string"><span class="hljs-tag">flex-wrap: wrap;&quot;</span></span><br><span class="hljs-tag">&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 50px; flex-basis: 300px; flex-grow: 1; background: red&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>不过在常规开发过程中，一般会用min-width来指定。</p>
<h3 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h3><p>速写属性。</p>
<p>是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。</p>
<p>有三个快捷值：</p>
<ul>
<li>auto, 表示：1 1 auto</li>
<li>1， 表示：1 1 0%  其实就是相当于auto</li>
<li>none，表示：0 0 auto</li>
</ul>
<h3 id="align-self"><a href="#align-self" class="headerlink" title="align-self"></a>align-self</h3><p>允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。</p>
<p>默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</p>
<p>取值的效果，对应align-items</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.item</span> &#123;<br>  <span class="hljs-attribute">align-self</span>: auto | flex-start | flex-end | center | baseline | stretch;<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="内容引用"><a href="#内容引用" class="headerlink" title="内容引用"></a>内容引用</h2><p>关于弹性盒子的内容，大多参考借鉴<strong>阮一峰</strong>的博客文章。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</a></p>
</blockquote>
<p>感谢峰哥！</p>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/my-blog/categories/%E6%B5%8B%E8%AF%95%E5%BC%80%E5%8F%91/" class="category-chain-item">测试开发</a>
  
  
    <span>></span>
    
  <a href="/my-blog/categories/%E6%B5%8B%E8%AF%95%E5%BC%80%E5%8F%91/css/" class="category-chain-item">css</a>
  
  

  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/my-blog/tags/%E6%B5%8B%E8%AF%95%E5%BC%80%E5%8F%91/">#测试开发</a>
      
        <a href="/my-blog/tags/%E6%B5%8B%E8%AF%95%E5%B9%B3%E5%8F%B0/">#测试平台</a>
      
        <a href="/my-blog/tags/css/">#css</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>布局细则</div>
      <div>https://walker_kwu.gitee.io/my-blog/2022/09/16/notes/css/layoutRule/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>木舟</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2022年9月16日</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>更新于</div>
          <div>2023年5月23日</div>
        </div>
      
      <div class="license-meta-item">
        <div>许可协议</div>
        <div>
          
            
            
              <a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
              <span class="hint--top hint--rounded" aria-label="BY - 署名">
                <i class="iconfont icon-by"></i>
              </span>
              </a>
            
              <a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
              <span class="hint--top hint--rounded" aria-label="NC - 非商业性使用">
                <i class="iconfont icon-nc"></i>
              </span>
              </a>
            
              <a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
              <span class="hint--top hint--rounded" aria-label="SA - 相同方式共享">
                <i class="iconfont icon-sa"></i>
              </span>
              </a>
            
          
        </div>
      </div>
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/my-blog/2022/09/18/autoTest/selenium/" title="selenium--最为流行的WebUI自动化工具库">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">selenium--最为流行的WebUI自动化工具库</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/my-blog/2022/09/15/notes/css/boxModel/" title="盒模型">
                        <span class="hidden-mobile">盒模型</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <span>By 木舟</span> <i class="iconfont icon-love"></i> 
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/my-blog/js/events.js" ></script>
<script  src="/my-blog/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/my-blog/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      headingSelector : CONFIG.toc.headingSelector || 'h1,h2,h3,h4,h5,h6',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      collapseDepth   : CONFIG.toc.collapseDepth || 0,
      scrollSmooth    : true,
      headingsOffset  : -boardTop
    });
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.10/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/my-blog/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/my-blog/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
